<script setup lang="ts">
import { onMounted, ref} from 'vue';
import {videoItem} from "../../api/req";
import { baseURL, getMicrovideoPictureAPI } from '../apis/homeAPI.js';

const speciesList = ref<videoItem[]>([]);

const loading = ref<boolean>(false);

const videoPage = ref({
    currentPage: 1,
    total: 0,
    pageSize: 9,
    showSizePicker: true,
    pageSizes: Array.from({ length: 200 }, (_, index) => index + 1),
});

// 设置分页信息
const setVideoSetsPage = (page?: number) => {
    if (page) videoPage.value.currentPage = page;
};

const getMicrovideoPicture = async () => {
  loading.value = true
  const req = {
    pageNo: videoPage.value.currentPage,
    pageSize: videoPage.value.pageSize,
  };

  const res = await getMicrovideoPictureAPI(req);
  const { data, meta } = res;
  speciesList.value = data.map((item: any) => ({
    id: item.id,
    title: item.attributes.title,
    image: baseURL + `${item.attributes.image.data.attributes.url}`,
    date: item.attributes.time,
    information: item.attributes.information,
  }));
  videoPage.value.total = meta.pagination.total
  loading.value = false
};

onMounted(() => {
  getMicrovideoPicture();
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<template>
  <div>
    <!-- 加载中状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loader"></div>
    </div>

    <!-- 数据展示部分 -->
    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <a-card
        v-for="species in speciesList"
        :key="species.id"
        class="species-video rounded-lg shadow-lg transition-transform transform hover:scale-105"
      >
        <router-link :to="{ name: 'MFPage', params: { id: species.id } }">
          <img :src="species.image" :alt="species.title" class="w-full h-48 object-cover rounded-md" />
        </router-link>
        <div class="p-4">
          <h3 class="text-lg font-semibold">{{ species.title }}</h3>
          <p class="text-sm text-gray-600">{{ species.date }}</p>
          <p class="text-gray-700">{{ species.information }}</p>
          <router-link :to="{ name: 'MFPage', params: { id: species.id } }" class="text-sky-400 hover:underline">观看视频</router-link>
        </div>
      </a-card>
    </div>

    <!-- 分页 -->
    <div class="mt-8 text-center">
      <a-pagination
        :current="videoPage.currentPage"
        :total="videoPage.total"
        :pageSize="videoPage.pageSize"
        @change="(page) => {
          setVideoSetsPage(page);
          getMicrovideoPicture();
        }"
      />
    </div>
  </div>
</template>


<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px; /* 设置高度以使加载图标居中 */
}

.loader {
  border: 8px solid rgba(255, 255, 255, 0.3); /* 背景透明的边框 */
  border-top: 8px solid #3498db; /* 顶部颜色 */
  border-radius: 50%; /* 圆形 */
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
